import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:flutter_vant_kit/main.dart';
import 'package:provider/provider.dart';
import 'package:shoes_shop/models/public_provider_model.dart';
import 'dart:math' as math;
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:shoes_shop/pages/detail_page.dart';
// import 'package:vector_math/vector_math_64.dart' as v;

class CategoryPage extends StatelessWidget {
  const CategoryPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // //调用provider providerGetGoodsList 接口
    // if(Provider.of<PublicProviderModel>(context).goodsList.length == 0){
    //   Provider.of<PublicProviderModel>(context).providerGetGoodsList();
    // }
    return Scaffold(
      backgroundColor: Colors.grey[100],
      body: ListView(
        children: [
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 40.w, vertical: 15.w),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  "猜你喜欢 😍",
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 32,
                  ),
                ),
              ],
            ),
          ),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 70.w),
            child: Consumer<PublicProviderModel>(
              builder: (context, val, child) => StaggeredGridView.countBuilder(
                shrinkWrap: true, //收缩高度
                crossAxisCount: 4,
                itemCount: val.goodsList.length,
                itemBuilder: (BuildContext context, int index) => InkWell(
                  borderRadius: BorderRadius.circular(20),
                  onTap: (){
                    Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (_) => DetailPage(
                        val.goodsList[index],
                        'like'
                      ),
                    ),
                  );
                  },
                  child: Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20),
                      boxShadow: [
                        BoxShadow(
                            color: Colors.black12,
                            offset: Offset(0.0, 15.0), //阴影xy轴偏移量
                            blurRadius: 15.0, //阴影模糊程度
                            spreadRadius: 1.0 //阴影扩散程度
                            ),
                      ],
                      color: Colors.white,
                    ),
                    child: Container(
                      padding: EdgeInsets.all(20.0),
                      child: Column(
                        children: [
                          Container(
                            padding: const EdgeInsets.symmetric(vertical: 40.0),
                            child: Hero(
                              tag: 'like${val.goodsList[index].sId}',
                              child: Transform.rotate(
                                angle: -math.pi / 7,
                                origin: Offset(0, 0),
                                child: Transform.scale(
                                  scale: 1.75,
                                  origin: Offset(13, 13),
                                  child: Image.network(
                                    val.goodsList[index].imgs[0],
                                    width: 220,
                                    // image: AssetImage(
                                    //     "assets/${shoeList[index].imgs[0]}"),
                                  ),
                                ),
                              ),
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 20.0),
                            child: Text(
                              "${val.goodsList[index].title}",
                              style: TextStyle(
                                color: Colors.black87,
                                fontWeight: FontWeight.w400,
                              ),
                            ),
                          ),
                          Container(
                            margin: EdgeInsets.only(top: 10.0),
                            child: Price(
                              value: val.goodsList[index].price,
                              fontWeight: FontWeight.bold,
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                ),
                staggeredTileBuilder: (int index) => StaggeredTile.fit(2),
                mainAxisSpacing: 40.0,
                crossAxisSpacing: 40.0,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

// class CategoryPage extends StatefulWidget {
//   @override
//   _CategoryPageState createState() => _CategoryPageState();
// }

// class _CategoryPageState extends State<CategoryPage>
//     with AutomaticKeepAliveClientMixin {
//   @override
//   bool get wantKeepAlive => true;

//   List<ShoeModelData> shoeList = [];

//   @override
//   void initState() {
//     super.initState();
//     _getGoodsList();
//   }

//   void _getGoodsList() async {
//     var res = await getGoodsList();
//     setState(() {
//       shoeList = res.data;
//     });
//   }

//   @override
//   Widget build(BuildContext context) {
//     super.build(context);
//     return 
//   }
// }
